<template>
  <div class="autumn-container">
    <!-- 面包 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>库存日志列表</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="autumn-center">
      <!-- 搜索栏 -->
      <div class="query-form">
        <autumn-search :modelValue="queryInfo" @search="search" :moreSearch="true">
          <template #default>
            <el-col :span="4">
              <el-form-item prop="blur" label="关键词">
                <el-input v-model="queryInfo.blur" placeholder="关键词" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="fromWarehouseInfoId" label="来源仓库">
                <el-select v-model="queryInfo.fromWarehouseInfoId">
                  <el-option v-for="(item, index) in fromWarehouses" :key="index" :label="item.code + '-' + item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="fromWarehouseAreaId" label="来源库区">
                <el-select v-model="queryInfo.fromWarehouseAreaId">
                  <el-option v-for="(item, index) in fromWarehouseAreas" :key="index" :label="item.code + '-' + item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="fromWarehouseLocationId" label="来源库位">
                <el-select v-model="queryInfo.fromWarehouseLocationId">
                  <el-option v-for="(item, index) in fromWarehouseLocations" :key="index"
                    :label="item.code + '-' + item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <template #more>
            <el-col :span="4">
              <el-form-item prop="toWarehouseInfoId" label="目的仓库">
                <el-select v-model="queryInfo.toWarehouseInfoId">
                  <el-option v-for="(item, index) in toWarehouses" :key="index" :label="item.code + '-' + item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="toWarehouseAreaId" label="目的库区">
                <el-select v-model="queryInfo.toWarehouseAreaId">
                  <el-option v-for="(item, index) in toWarehouseAreas" :key="index" :label="item.code + '-' + item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="toWarehouseLocationId" label="目的库位">
                <el-select v-model="queryInfo.toWarehouseLocationId">
                  <el-option v-for="(item, index) in toWarehouseLocations" :key="index"
                    :label="item.code + '-' + item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="actionType" label="出入库">
                <el-select v-model="queryInfo.actionType">
                  <el-option v-for="(value, key, index) in $listDict('WAREHOUSE_INOUT')" :key="index" :label="value"
                    :value="key">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="businessType" label="业务类型">
                <el-select v-model="queryInfo.businessType">
                  <el-option v-for="(value, key, index) in businessTypes" :key="index" :label="value" :value="key">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
        </autumn-search>
      </div>

      <!-- 数据表格 -->
      <div class="main-body top">
        <autumn-table :page="page" @changePage="search">
          <template #column>
            <el-table-column type="index" label="#" fixed="left" align="center">
              <template #default="scope">
                {{ initIndex(scope.$index) }}
              </template>
            </el-table-column>
            <el-table-column prop="productId" label="商品信息">
              <template #default="scope">
                {{ scope.row.productCode + '-' + scope.row.productName }}
              </template>
            </el-table-column>
            <el-table-column prop="productSpec" label="商品规格" />
            <el-table-column prop="productModel" label="商品型号" />
            <el-table-column prop="batchNo" label="商品批号" />
            <el-table-column prop="snNo" label="商品条码" />
            <el-table-column prop="fromWarehouseInfoId" label="来源仓库">
              <template #default="scope">
                {{ scope.row.fromWarehouseInfoCode + '-' + scope.row.fromWarehouseInfoName }}
              </template>
            </el-table-column>
            <el-table-column prop="fromWarehouseAreaId" label="来源库区">
              <template #default="scope">
                {{ scope.row.fromWarehouseAreaCode + '-' + scope.row.fromWarehouseAreaName }}
              </template>
            </el-table-column>
            <el-table-column prop="fromWarehouseLocationId" label="来源库位">
              <template #default="scope">
                {{ scope.row.fromWarehouseLocationCode + '-' + scope.row.fromWarehouseLocationName }}
              </template>
            </el-table-column>
            <el-table-column prop="toWarehouseInfoId" label="目的仓库">
              <template #default="scope">
                {{ scope.row.toWarehouseInfoCode + '-' + scope.row.toWarehouseInfoName }}
              </template>
            </el-table-column>
            <el-table-column prop="toWarehouseAreaId" label="目的库区">
              <template #default="scope">
                {{ scope.row.toWarehouseAreaCode + '-' + scope.row.toWarehouseAreaName }}
              </template>
            </el-table-column>
            <el-table-column prop="toWarehouseLocationId" label="目的库位">
              <template #default="scope">
                {{ scope.row.toWarehouseLocationCode + '-' + scope.row.toWarehouseLocationName }}
              </template>
            </el-table-column>
            <el-table-column prop="stockQty" label="数量" align="right" width="100">
              <template #default="scope">
                <span style="color: lightgreen;" v-if="scope.row.actionType == '1'">{{ '+' + scope.row.stockQty }}</span>
                <span style="color: crimson;" v-else-if="scope.row.actionType == '2'">{{ '-' + scope.row.stockQty
                }}</span>
                <span v-else>{{ scope.row.stockQty }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="sourceOrderNo" label="来源单号" />
            <el-table-column prop="businessOrderNo" label="业务单号" />
            <el-table-column prop="businessType" label="业务类型">
              <template #default="scope">
                {{ businessTypes[scope.row.businessType] }}
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" />
            <el-table-column prop="createName" label="操作人" width="100" />
            <el-table-column prop="createTime" label="操作时间" align="center" width="150"
              :formatter="(row: any) => $moment(row.createTime, 'YYYY-MM-DD HH:mm')" />
          </template>
        </autumn-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import hooks from 'src/hook/index'
import { $moment, $listDict } from 'src/util/tools'
import { pageStockLog } from 'src/api/wms/stockLog'
import { listWarehouseInfo } from 'src/api/wms/warehouseInfo'
import { listWarehouseArea } from 'src/api/wms/warehouseArea'
import { listWarehouseLocation } from 'src/api/wms/warehouseLocation'

// 查询仓库分类/属性
const businessTypes = $listDict('WAREHOUSE_BUSINESS_TYPE')

//查询来源仓库/库区/库位
const fromWarehouses = ref<Array<any>>([])
listWarehouseInfo().then(({ data }) => {
  fromWarehouses.value = data
})
const fromWarehouseAreas = ref<Array<any>>([])
const initFromWarehouseArea = (warehouseInfoId: string) => {
  listWarehouseArea({ warehouseInfoId }).then(({ data }) => {
    fromWarehouseAreas.value = data
  })
}
const fromWarehouseLocations = ref<Array<any>>([])
const initFromWarehouseLocation = (warehouseAreaId: string) => {
  listWarehouseLocation({ warehouseAreaId }).then(({ data }) => {
    fromWarehouseLocations.value = data
  })
}

//查询目的仓库/库区/库位
const toWarehouses = ref<Array<any>>([])
listWarehouseInfo().then(({ data }) => {
  toWarehouses.value = data
})
const toWarehouseAreas = ref<Array<any>>([])
const initToWarehouseArea = (warehouseInfoId: string) => {
  listWarehouseArea({ warehouseInfoId }).then(({ data }) => {
    toWarehouseAreas.value = data
  })
}
const toWarehouseLocations = ref<Array<any>>([])
const initToWarehouseLocation = (warehouseAreaId: string) => {
  listWarehouseLocation({ warehouseAreaId }).then(({ data }) => {
    toWarehouseLocations.value = data
  })
}

// 分页查询
const queryInfo = reactive({
  blur: '',
  fromWarehouseInfoId: '',
  fromWarehouseAreaId: '',
  fromWarehouseLocationId: '',
  toWarehouseInfoId: '',
  toWarehouseAreaId: '',
  toWarehouseLocationId: '',
  actionType: '',
  businessType: ''
})
const { page, initIndex, search } = hooks.useTable((pageNumber: number, pageSize: number) => {
  pageStockLog({ ...queryInfo, pageNumber, pageSize }).then(({ data }) => {
    page.data = data.list
    page.total = data.total
  })
})

//监听来源仓库/库区/库位
watch(() => queryInfo.fromWarehouseInfoId, (newVal: string) => {
  if (!newVal) {
    return
  }
  initFromWarehouseArea(newVal)
})
watch(() => queryInfo.fromWarehouseAreaId, (newVal: string) => {
  if (!newVal) {
    return
  }
  initFromWarehouseLocation(newVal)
})

//监听目的仓库/库区/库位
watch(() => queryInfo.toWarehouseInfoId, (newVal: string) => {
  if (!newVal) {
    return
  }
  initToWarehouseArea(newVal)
})
watch(() => queryInfo.toWarehouseAreaId, (newVal: string) => {
  if (!newVal) {
    return
  }
  initToWarehouseLocation(newVal)
})

</script>

<style lang="scss" scoped></style>

